<style lang="less">
    @import "./message.less";
</style>

<template>
    <div class="message-main-con">
        <div class="message-mainlist-con">
            <div>
                <Button
                        @click="setCurrentMesType('unread')"
                        size="large"
                        long
                        type="text">
                    <div class="mes-wrap">
                        <transition name="mes-current-type-btn">
                            <Icon
                                    v-show="currentMessageType == 'unread'"
                                    type="md-checkmark"></Icon>
                        </transition>
                        <span class="mes-type-btn-text">未读消息</span>
                        <Badge
                                class="message-count-badge-outer"
                                class-name="message-count-badge-red"
                                :count="unreadCount"></Badge>
                    </div>
                </Button>
            </div>
            <div>
                <Button
                        @click="setCurrentMesType('hasread')"
                        size="large"
                        long
                        type="text">
                    <div class="mes-wrap">
                        <transition name="mes-current-type-btn">
                            <Icon
                                    v-show="currentMessageType == 'hasread'"
                                    type="md-checkmark"></Icon>
                        </transition>
                        <span class="mes-type-btn-text">已读消息</span>
                        <Badge
                                class="message-count-badge-outer"
                                class-name="message-count-badge"
                                :count="hasreadCount"></Badge>
                    </div>
                </Button>
            </div>
        </div>
        <div class="message-content-con">
            <transition name="view-message">
                <div v-if="showMesTitleList" class="message-title-list-con">
                    <Table
                            ref="messageList"
                            :loading="loading"
                            :columns="mesTitleColumns"
                            :data="currentMesList"
                            :no-data-text="noDataText"></Table>
                    <div class="message-page">
                        <Poptip
                                confirm
                                transfer
                                title="确定标记所有消息为已读？"
                                @on-ok="readAll"
                                v-if="currentMessageType == 'unread'">
                            <Button icon="md-notifications-off" :disabled="unreadCount <= 0">全部标记为已读</Button>
                        </Poptip>
                        <Poptip
                                confirm
                                transfer
                                title="确定彻底删除所有已读消息？"
                                @on-ok="deleteAll"
                                v-if="currentMessageType == 'hasread'">
                            <Button icon="md-trash" :disabled="hasreadCount <= 0">全部彻底删除</Button>
                        </Poptip>
                        <Page
                                :current="params.current"
                                :total="total"
                                :page-size="params.size"
                                @on-change="changePage"
                                @on-page-size-change="changesize"
                                :page-size-opts="[5, 10]"
                                size="small"
                                show-total
                                show-elevator
                                show-sizer
                                class="page-fix"></Page>
                    </div>
                </div>
            </transition>
            <transition name="back-message-list">
                <div v-if="!showMesTitleList" class="message-view-content-con">
                    <div class="message-content-top-bar">
            <span class="mes-back-btn-con">
              <Button type="text" @click="backMesTitleList">
                <Icon type="ios-arrow-back"></Icon>&nbsp;&nbsp;返回
              </Button>
            </span>
                        <h3 class="mes-title">{{ mes.title }}</h3>
                    </div>
                    <p class="mes-time-con">
                        <Icon type="android-time"></Icon>
                        &nbsp;&nbsp;{{ mes.time }}
                    </p>
                    <div class="message-content-body">
                        <p class="message-content" v-html="mes.content">
                            {{ mes.content }}
                        </p>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import {allMessageSend, deleteMessageSend, editMessageSend, getMessageSendData} from "../../api";
    import Cookies from "js-cookie";

    export default {
        name: "message_index",
        data() {
            const markAsreadBtn = (h, params) => {
                return h(
                    "Button",
                    {
                        props: {
                            icon: "md-eye-off",
                            size: "small",
                        },
                        on: {
                            click: () => {
                                // 标记已读
                                let v = params.row;
                                // 转换null为""
                                for (let attr in v) {
                                    if (v[attr] == null) {
                                        v[attr] = "";
                                    }
                                }
                                let str = JSON.stringify(v);
                                let data = JSON.parse(str);
                                data.status = 1;
                                this.loading = true;
                                editMessageSend(data).then((res) => {
                                    this.loading = false;
                                    if (res.status == 200) {
                                        this.$Message.success("操作成功");
                                        this.unreadCount -= 1;
                                        this.hasreadCount += 1;
                                        this.$store.commit("setMessageCount", this.unreadCount);
                                        this.refreshMessage();
                                    }
                                });
                            },
                        },
                    },
                    "标为已读"
                );
            };
            const deleteRealBtn = (h, params) => {
                return h(
                    "Button",
                    {
                        props: {
                            icon: "md-trash",
                            size: "small",
                        },
                        on: {
                            click: () => {
                                // 彻底删除
                                let v = params.row;
                                this.loading = true;
                                deleteMessageSend({ids: v.id}).then((res) => {
                                    this.loading = false;
                                    if (res.status == 200) {
                                        this.$Message.success("操作成功");
                                        this.recyclebinCount -= 1;
                                        this.refreshMessage();
                                    }
                                });
                            },
                        },
                    },
                    "删除"
                );
            };
            return {
                loading: true,
                params: {
                    userId: JSON.parse(Cookies.get("userInfo")).id,
                    status: 0,
                    page: {
                        current: 1, // 当前页数
                        size: 10, // 页面大小
                        total: 0, // 表单数据总数
                    },
                    sort: "createTime", // 默认排序字段
                    order: "desc", // 默认排序方式
                },
                total: 0,
                totalUnread: 0,
                totalRead: 0,
                totalRemove: 0,
                currentMesList: [],
                currentMessageType: "unread",
                showMesTitleList: true,
                unreadCount: 0,
                hasreadCount: 0,
                recyclebinCount: 0,
                noDataText: "暂无未读消息",
                mes: {
                    title: "",
                    time: "",
                    content: "",
                },
                dictMessageType: this.$store.state.dict.messageType,
                mesTitleColumns: [
                    {
                        type: "index",
                        width: 60,
                        align: "center",
                    },
                    {
                        title: " ",
                        key: "title",
                        align: "left",
                        ellipsis: true,
                        render: (h, params) => {
                            return h("span", [
                                h(
                                    "a",
                                    {
                                        style: {
                                            margin: "0 30px 0 0",
                                        },
                                        on: {
                                            click: () => {
                                                this.getContent(params.row);
                                            },
                                        },
                                    },
                                    "【" + params.row.type + "】 " + params.row.title
                                ),
                            ]);
                        },
                    },
                    {
                        title: " ",
                        key: "time",
                        align: "center",
                        width: 190,
                        render: (h, params) => {
                            return h("span", [
                                h("Icon", {
                                    props: {
                                        type: "md-time",
                                        size: 16,
                                    },
                                    style: {
                                        margin: "0 5px 3px 0",
                                    },
                                }),
                                h("span", params.row.createTime),
                            ]);
                        },
                    },
                    {
                        title: " ",
                        key: "asread",
                        align: "center",
                        width: 210,
                        render: (h, params) => {
                            if (this.currentMessageType == "unread") {
                                return h("div", [markAsreadBtn(h, params)]);
                            } else if (this.currentMessageType == "hasread") {
                                return h("div", [deleteRealBtn(h, params)]);
                            }
                        },
                    },
                ],
            };
        },
        methods: {
            changePage(v) {
                this.params.current = v;
                this.refreshMessage();
            },
            changesize(v) {
                this.params.size = v;
                this.refreshMessage();
            },
            refreshMessage() {
                let status = 0;
                let type = this.currentMessageType;
                if (type == "unread") {
                    status = 0;
                } else if (type == "hasread") {
                    status = 1;
                } else {
                    status = 2;
                }
                this.params.status = status;
                this.loading = true;
                getMessageSendData(this.params.current, this.params.size, this.params).then((res) => {
                    this.loading = false;
                    if (res.status == 200) {
                        this.currentMesList = res.result.records;
                        this.page.total = res.result.total;
                    }
                });
            },
            initMessage() {
                this.params.status = 0;
                getMessageSendData(this.params.current, this.params.size, this.params).then((res) => {
                    if (res.status == 200) {
                        this.unreadCount = res.result.total;
                        this.initReadMessage();
                    }
                });
            },
            initReadMessage() {
                this.params.status = 1;
                getMessageSendData(this.params.current, this.params.size, this.params).then((res) => {
                    if (res.status == 200) {
                        this.hasreadCount = res.result.total;
                        this.initRemoveMessage();
                    }
                });
            },
            initRemoveMessage() {
                this.params.status = 2;
                getMessageSendData(this.params.current, this.params.size, this.params).then((res) => {
                    if (res.status == 200) {
                        this.recyclebinCount = res.result.total;
                        this.setCurrentMesType("unread");
                    }
                });
            },
            deleteMessage(id) {
                deleteMessageSend({ids: id}).then((res) => {
                    if (res.status == 200) {
                        this.$Message.success("删除成功");
                    }
                });
            },
            backMesTitleList() {
                this.showMesTitleList = true;
            },
            setCurrentMesType(type) {
                if (this.currentMessageType !== type) {
                    this.showMesTitleList = true;
                }
                this.currentMessageType = type;
                if (type == "unread") {
                    this.noDataText = "暂无未读消息";
                } else if (type == "hasread") {
                    this.noDataText = "暂无已读消息";
                }
                this.params.current = 1;
                this.refreshMessage();
            },
            getContent(v) {
                this.showMesTitleList = false;
                this.mes.title = v.title;
                this.mes.time = v.createTime;
                this.mes.content = v.content;
                if (v.status == 0) {
                    // 标记已读 转换null为""
                    for (let attr in v) {
                        if (v[attr] == null) {
                            v[attr] = "";
                        }
                    }
                    let str = JSON.stringify(v);
                    let data = JSON.parse(str);
                    data.status = 1;
                    editMessageSend(data).then((res) => {
                        if (res.status == 200) {
                            this.unreadCount -= 1;
                            this.hasreadCount += 1;
                            this.$store.commit("setMessageCount", this.unreadCount);
                            this.refreshMessage();
                        }
                    });
                }
            },
            readAll() {
                allMessageSend(0).then((res) => {
                    if (res.status == 200) {
                        this.hasreadCount += this.unreadCount;
                        this.unreadCount = 0;
                        this.$store.commit("setMessageCount", this.unreadCount);
                        this.refreshMessage();
                    }
                });
            },
            deleteAll() {
                allMessageSend(1).then((res) => {
                    if (res.status == 200) {
                        this.hasreadCount = 0;
                        this.refreshMessage();
                    }
                });
            },
        },
        mounted() {
            this.initMessage();
        },
        watch: {
            // 监听路由变化通过id获取数据
            $route(to, from) {
                if (to.name == "message_index") {
                    this.initMessage();
                }
            },
        },
    };
</script>

